<template>
	<div>
		<Echart id="mapB" ref="mapB" :options="options" height="700px" width="100%"></Echart>
		<component
		      :visible="showModal"
		      
		      @close="showModal = false"
		    />
	</div>
</template>

<script>
	import Echart from '@/common/echart';
	import component from '@/components/echart/model/component';
	export default {
		data() {
			return {
				options: {},
				adcodeId: '',
				showModal: false,
			};
		},
		components: {
			Echart,
			component,
		},
		props: {
			cdata: {
				type: Object,
				default: () => ({})
			},
			back: {
				type: Boolean,
				default: false
			},
		},
		watch: {
			cdata: {
				handler(newData) {
					const that = this;
					that.drawmap(newData);
				},
				immediate: true,
				deep: true,
			},
		},
		methods: {
			async drawmap(newData) {
				const that = this;
				let maps_ng = await this.$HTTP.get(newData.json_url,{'type':'chart'});
				that.$echarts.registerMap('ng', maps_ng);
				
				
				
				that.$refs.mapB.chart.showLoading('default', {
					text: '统计中，请稍候...',
					maskColor: 'transparent',
					textColor: '#fff',
				});
				
				// 添加点击事件监听器
				that.$refs.mapB.chart.on('click', function (params) {
				  // 处理点击事件
				  //console.log(params); // 打印点击的参数信息
				  // 根据params.componentType和params.seriesType判断点击的是地图区域还是其他图表元素
				  // 然后执行相应的逻辑，比如显示弹窗、更新数据等
				  that.showModal=true
				});
				
				// that.$nextTick(() => {
				// 	try {
				// 		const map = that.$refs.map_a.chart;
				// 		map.hideLoading();

				// 	} catch (error) {
				// 		console.log(error)
				// 	}
				// });
				
				const geoCoordMap = newData.geo_data;
				let data = newData.point_data;
				that.$refs.mapB.chart.hideLoading();
				/*
									adcode:编码
									name:名称
									total:总设备数
									fault:故障设备数
									repair:报修数量
				*/
				var convertData = function(data) {
					var res = [];
					for (var i = 0; i < data.length; i++) {
						var geoCoord = geoCoordMap[data[i].name];
						if (geoCoord) {
							res.push({
								name: data[i].name,
								value: geoCoord.concat(data[i].value, data[i].online, data[i].fault, data[i].repair),
							});
						}
					}
					return res;
				};
				that.options = {
					backgroundColor: 'transparent',
					title: {
						top: '',
						text: '',
						subtext: '',
						x: 'center',
						textStyle: {
							color: '#ccc'
						}
					},

					tooltip: {
						trigger: 'item',
						formatter: function(params) {
							if (params.data) {
								//console.log(params.data)
								if (typeof(params.value)[2] == "undefined") {
									
									return params.name + '<br>' + '设备总数' + ' : ' + params.value + '台' + '<br>' + '在线数量' + ' : ' + params.data.online + '台'
								} else {
									return params.name + '<br>' + '设备总数' + ' : ' + params.value[2] + '台' + '<br>' + '在线数量' + ' : ' + params.value[3] + '台'
								}
							}
						},
					},
					
					
					
					// tooltip: {
					// 	trigger: 'item',
					// 	formatter: function(params) {
					// 		console.log(params)
					// 		if (typeof(params.value)[2] == "undefined") {
					// 			return params.name + ' : ' + params.value;
					// 		} else {
					// 			return params.name + ' :: ' + params.value[2];
					// 		}
					// 	}
					// },
					visualMap: {
						show: false,
						min: 0,
						max: 500,
						left: 'left',
						top: 'bottom',
						text: ['高', '低'], // 文本，默认为数值文本
						calculable: true,
						seriesIndex: [1],
						inRange: {
							color: ['#3B5077', '#031525'] // 蓝黑
						}
					},
					geo: {
						map: 'ng',
						show: true,
						roam: true,
						zoom: 1.6,
						 top:'30%',
						label: {
							show: true,
							textStyle: {
								color: '#ffffff'
							},
							emphasis: {
								show: true,
								textStyle: {
									color: '#ffffff'
								}
							}
						},
						itemStyle: {
							areaColor: '#142957',
							borderWidth: 1,
							borderColor: '#4c9bfd',
							shadowColor: '#12121f',
							shadowBlur: 24,
							shadowOffsetX: -2,
							shadowOffsetY: 5,
							emphasis: {
								areaColor: '#0b1c2d', //悬浮区背景
							},
						},
					},
					series: [
						{
							name: '波纹圆点',
							type: 'effectScatter',
							coordinateSystem: 'geo',
							data: convertData(data.sort(function(a, b) {
								return b.value - a.value;
							}).slice(0, 20)),
							symbolSize: 10,
							symbolOffset: [0, -20],
							showEffectOn: 'render',
							rippleEffect: {
								brushType: 'stroke'
							},
							hoverAnimation: false, //圆点是否开启hover效果  true
							label: {
								formatter: '{b}',
								position: 'right',
								show: false,
								color: '#ffffff'
							},
							itemStyle: {
								areaColor: '#1D346F',
								color: 'red',
								borderColor: '#004083',
								emphasis: {
									areaColor: '#0f2c70',
								},
							},
							data: convertData(data),
						},
						{
							type: 'map',
							map: 'ng',
							geoIndex: 0,
							aspectScale: 0.75, //长宽比
							showLegendSymbol: false, // 存在legend时显示
							label: {
								show: false,
								emphasis: {
									show: false,
									textStyle: {
										color: '#fff'
									}
								}
							},
							roam: true,
							itemStyle: {
								areaColor: '#142957',
								borderColor: '#0692a4',
								emphasis: {
									areaColor: '#0b1c2d'
								}
							},
							animation: false,
							data: data,
						},
						{
							name: '气泡数据',
							type: 'scatter',
							coordinateSystem: 'geo',
							symbol: 'pin',
							symbolSize: [90, 90],
							symbolOffset: [0, -15],
							label: {
								normal: {
									show: true,
									textStyle: {
										color: '#fff',
										fontSize: 12,
										align: 'center'
									},
									// formatter(value) {
									// 	var text =
									// 		`{fline|${value.data.value[3]}}\n{tline|${value.data.value[4]}}\n{sline|${value.data.value[5]}}`
									// 	return text
									// },
									formatter(value) {
										return value.data.value[2]
									},
									rich: {
										fline: {
											color: '#ffffff',
											fontSize: 14,
										},
										tline: {
											color: '#f52e5a',
											fontSize: 14,
										},
										sline: {
											color: '#f52e5a',
											fontSize: 14,
										},
									},
								}
							},
							itemStyle: {
								normal: {
									color: 'red', //标志颜色
								}
							},
							data: convertData(data),
							showEffectOn: 'render',
							rippleEffect: {
								brushType: 'stroke'
							},
							hoverAnimation: true,
							zlevel: 1
						},
					]
				}
			
				

			},
		},
	};
</script>

<style scoped>
	.back_link {
		position: absolute;
		left: 15px;
		top: 15px;
		font-size: 18px;
		color: #fff;
		cursor: pointer;
		z-index: 100;
	}
</style>